import React, {Component} from 'react';
import styles from './index.module.css'
import './index.css'
import NavHeader from "../../../../components/NavHeader/NavHeader";
import {require2} from "../../../../netWork";
import {Link} from "react-router-dom";
import {withFormik} from "formik";
import * as yup from 'yup';
import {Toast} from "antd-mobile";
import {setToken} from "../../../../utiles/token";

const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/;
const RGE_PWD = /^[a-zA-Z_\d]{5,12}$/;
class Login extends Component {

    render() {
        const {values, handleSubmit, handleChange,handleBlur, errors,touched} = this.props;
        return (
            <div className={styles.root}>
                <NavHeader>账号登录</NavHeader>
                <form className={styles.form}>
                    <div className={styles.user}>
                        <input type="text" className='input1' value={values.username} name='username'
                               placeholder='请输入账号'
                               onBlur={handleBlur}
                               onChange={handleChange}/>
                    </div>
                    {errors.username && touched.username &&(<div className={styles.errors}>{errors.username}</div>)}
                    <div className={styles.user}>
                        <input type="passWord" className='input1' value={values.password} name='password'
                               placeholder='请输入密码'
                               onBlur={handleBlur}
                               onChange={handleChange}/>
                    </div>
                    {errors.password && touched.password &&(<div className={styles.errors}>{errors.password}</div>)}
                    <div className={styles.login} onClick={handleSubmit}>登录</div>
                    <Link to='/regist' className={styles.link}>还没有账号，去注册~</Link>
                </form>
            </div>
        );
    }
}

Login = withFormik({
    //提供状态
    mapPropsToValues: () => ({username: '', password: ''}),
    //表单提交事件
    handleSubmit: (values,{props}) => {
        // console.log(values);
        require2({
            url: '/user/login',
            data: {
                username: values.username,
                password: values.password
            }
        }).then(res =>{
            const {status,description} = res;
            if(status === 200){
                const {token} = res.body;
                setToken(token);
                const {location:{state}} = props;
                if (state){
                    props.history.replace(state.from.pathname)
                }else {
                    props.history.go(-1)
                }
                /*返回*/
                // console.log(props); 此组件的props属性
            }
            Toast.info(description,2,null);

        })
    },
    /*表单验证*/
    validationSchema:yup.object().shape({
        username:yup.string().required('账号为必填项').matches(REG_UNAME,'长度5-8，只能出现数字，字母下划线'),
        password:yup.string().required('密码为必填项').matches(RGE_PWD,'长度5-12，只能出现数字，字母下划线'),
        })
})(Login);
//返回包装后的Login
export default Login;
